---
title: "列表项标记类型"
description: "用来控制列表项标记类型的功能类。"
features:
  responsive: true
  customizable: true
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/listStyleType'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

<!-- ## Usage -->
## 使用方法

<!-- To create bulleted or numeric lists, use the `list-disc` and `list-decimal` utilities. -->
要创建项目符号或数字列表，请使用 `list-disc` 和 `list-decimal` 功能类。

```html purple
<template preview>
  <div class="mb-6 space-y-2">
    <p class="text-sm text-purple-600">.list-disc</p>
    <ul class="list-disc list-inside text-purple-800">
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
      <li>Assumenda, quia temporibus eveniet a libero incidunt suscipit</li>
      <li>Quidem, ipsam illum quis sed voluptatum quae eum fugit earum</li>
    </ul>
  </div>
  <div class="mb-6 space-y-2">
    <p class="text-sm text-purple-600">.list-decimal</p>
    <ol class="list-decimal list-inside text-purple-800">
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
      <li>Assumenda, quia temporibus eveniet a libero incidunt suscipit</li>
      <li>Quidem, ipsam illum quis sed voluptatum quae eum fugit earum</li>
    </ol>
  </div>
  <div class="space-y-2">
    <p class="text-sm text-purple-600">.list-none (default)</p>
    <ul class="default text-purple-800">
      <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
      <li>Assumenda, quia temporibus eveniet a libero incidunt suscipit</li>
      <li>Quidem, ipsam illum quis sed voluptatum quae eum fugit earum</li>
    </ul>
  </p>
  </div>
</template>

<ul class="**list-disc**">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  ...
</ul>

<ol class="**list-decimal**">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  ...
</ol>

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  ...
</ul>
```

<!-- ## Responsive -->
## 响应式

<!-- To control the list style type of a list element at a specific breakpoint, add a `{screen}:` prefix to any existing list utility. For example, use `.md:list-disc` to apply the `list-disc` utility at only medium screen sizes and above. -->
要在特定的断点处控制元素的列表项标记类型，请在任何现有的列表功能类前添加 `{screen}:` 前缀。例如，使用 `md:list-disc` 来仅在中等大小及以上的屏幕应用 `list-disc` 功能类。

```html
<ul class="list-none **md:list-disc**">
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit</li>
  <li>Assumenda, quia temporibus eveniet a libero incidunt suscipit</li>
  <li>Quidem, ipsam illum quis sed voluptatum quae eum fugit earum</li>
</ul>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看 [响应式设计](/docs/responsive-design) 文档。

<!-- ## Customizing -->
## 定制

<!-- By default Tailwind provides three utilities for the most common list style types. You change, add, or remove these by editing the `theme.listStyleType` section of your Tailwind config. -->
默认情况下，Tailwind 为最常见的列表样式类型提供了三个功能类，您可以通过编辑 Tailwind 配置的 `theme.listStyleType` 部分来改变、添加或删除这些功能类。

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      listStyleType: {
        none: 'none',
-       disc: 'disc',
-       decimal: 'decimal',
+       square: 'square',
+       roman: 'upper-roman',
      }
    }
  }
```

<!-- ### Variants -->
### 变体

<Variants plugin="listStyleType" />

<!-- ### Disabling -->
### 禁用

<Disabling plugin="listStyleType" />
